<template>
	<view class="content">
		<view class="table">
			<view class="table-left">
				宠物昵称
			</view>
			<view class="table-right">
				<u-icon name="arrow-right" style="margin-left: 10rpx;" color="#999999" size="30"></u-icon>
				<input type="text" value="" placeholder="我的宠物" />
			</view>
		</view>
		<view class="table">
			<view class="table-left">
				配偶品种
			</view>
			<view class="table-right">
				<u-icon name="arrow-right" style="margin-left: 10rpx;" color="#999999" size="30"></u-icon>
				<input type="text" value="" placeholder="请选择品种" />
			</view>
		</view>
		<view class="table">
			<view class="table-left">
				配偶性别
			</view>
			<view class="table-right">
				<u-icon name="arrow-right" style="margin-left: 10rpx;" color="#999999" size="30"></u-icon>
				<input type="text" value="" placeholder="请选择性别" />
			</view>
		</view>
		<view class="table">
			<view class="table-left">
				所在地区
			</view>
			<view class="table-right">
				<u-icon name="arrow-right" style="margin-left: 10rpx;" color="#999999" size="30"></u-icon>
				<input type="text" value="" placeholder="请选择位置" />
			</view>
		</view>
		<view class="buttons">发布宠物求偶信息</view>
		<view class="tips">
			欢迎拉力到宠物婚恋中介所！请提交宠物求偶的要求条 件，当铲红娘寻得合适的对象，会及时通知你的哦 ～
		</view>
		<view class="petTable">
			<view class="pet-title">
				正在寻找配偶的宠物
			</view>
			<view class="itemList-item">
				<view class="itemList-item-top">
					<view class="itemList-img">
						<image src="../../../static/user/bg.png"></image>
					</view>
					<view class="itemList-template">
						<view class="template-title"><span>宠物的昵称</span><span>寻找配偶</span></view>
						<view class="template-center">
							<span><u-icon name="man" color="#0095FF" size="28"></u-icon></span>
							<span>加菲猫</span>
							<span>0.5岁</span>
						</view>
						<view class="money">
							<view class="money-left">
								<view class="money-left-money">1小时前发布</view>
								<!-- <view class="money-left-money2"><span>￥600</span><span>保证金</span></view> -->
							</view>
							<view class="money-right">
								<span>3.4km</span>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="itemList-item-bottom">
					<span>爱宠之家 · 刚刚发布</span><span>2.8km</span>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'pair',
	data() {
		return {}
	}
};
</script>

<style lang="scss" scoped>
	.money-left{
		.money-left-money{
			font-weight: bold;
		}
		.money-left-money2{
			width: 100%;
			display: flex;
			flex-direction: row;
			font-weight: bold;
			span:nth-of-type(2){
				font-weight: normal;
				margin-left: 10rpx;
			}
		}
	}
	.money{
		width: 96%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 28rpx;
		position: absolute;
		color: #959595;
		bottom: 0;
		.money-right{
			display: flex;
			flex-direction: row-reverse;
		}
	}
	.template-center{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 28rpx;
		span{
			border-radius: 10rpx;
		}
		span:not(:first-child){
			margin-left: 20rpx;
		}
		span:nth-of-type(1){
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 149, 255, 0.08);
			border-radius: 10rpx;
		}
		span:nth-of-type(2){
			padding: 0 15rpx;
			height: 50rpx;
			display: flex;
			color: #FF9A00;
			align-items: center;
			justify-content: center;
			background: rgba(255, 154, 0, 0.08);
			border-radius: 10rpx;
		}
		span:nth-of-type(3){
			padding: 0 15rpx;
			height: 50rpx;
			display: flex;
			color: #8356F3;
			align-items: center;
			justify-content: center;
			background: rgba(131, 86, 243, 0.08);
			border-radius: 10rpx;
		}
	}
	.template-title{
		width: 100%;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		padding: 10rpx 0;
		padding-right: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		span:nth-of-type(2){
			color: #FFCC00;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	.itemList-template{
		width: 65%;
		height: 180rpx;
		display: flex;
		// align-items: center;
		flex-direction: column;
		position: relative;
	}
	.itemList-img{
		width: 35%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
	}
	.itemList-item-top{
		width: 700rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		background: white;
		border-radius: 20rpx;
		padding: 20rpx 0;
	}
	.itemList-item{
		width: 100%;
		min-height: 266rpx;
		border-bottom: 2px solid #F6F6F6;
		display: flex;
		align-items: center;
		// justify-content: center;
		flex-direction: column;
		padding-top: 20rpx;
	}
	.pet-title{
		width: 700rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #999999;
	}
	.petTable{
		width: 100%;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 46rpx;
	}
	.tips{
		width: 700rpx;
		font-size: 28rpx;
		color: #999999;
		padding: 0 0 30rpx 0;
	}
	.buttons{
		width: 660rpx;
		height: 80rpx;
		background: #FFCC00;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: white;
		margin: 40rpx 0;
	}
.table-left{
	width: 30%;
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #333333;
}
.table-right{
	width: 70%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	input{
		text-align: right;
	}
}
.table:nth-of-type(1){
	margin-top: 25rpx;
}
.table{
	width: 700rpx;
	height: 100rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #F6F6F6;
}
.content {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	background: white;
}
</style>
